<template>
  <div>
    <ele-pro-table
      row-key="dict_id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      :export-config="{ fileName: '字典数据' }"
    >
      <template #toolbar>
        <el-button
          type="primary"
          @click="getChildSelections"
          class="ele-btn-icon"
        >
          获取所有选中
        </el-button>
      </template>
      <template #action="{ row }">
        <el-link type="primary" underline="never" @click="editDict(row)">
          修改
        </el-link>
        <el-divider direction="vertical" />
        <el-link type="danger" underline="never" @click="removeDict(row)">
          删除
        </el-link>
      </template>
      <template #expand="{ row }">
        <child-table
          :dict_id="row.dict_id"
          v-model:selections="childSelections[row.dict_id]"
          @setDictionaryData="handleSetDictionaryData"
        />
      </template>
      <template #expandPrint="{ row }">
        <child-print-table :data="dictionaryDatas[row.dict_id]" />
      </template>
    </ele-pro-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { EleMessage } from "ele-admin-plus/es";
import { pageDictionaries } from "@/api/system/dictionary";
import ChildTable from "./child-table.vue";
import ChildPrintTable from "./child-print-table.vue";

/** 表格列配置 */
const columns = ref([
  {
    type: "expand",
    columnKey: "expand",
    width: 50,
    align: "center",
    slot: "expand",
    fixed: "left",
    // 用于打印
    printSlot: "expandPrint",
    // 用于导出
    formatter: (row) => {
      const rows = [
        ["#", "字典数据名称", "字典数据代码", "排序号", "创建时间"],
      ];
      dictionaryDatas[row.dict_id]?.forEach?.((d, i) => {
        rows.push([
          i + 1,
          d.dict_data_name ?? "",
          d.dict_data_code ?? "",
          d.sort_number ?? "",
          d.created_at ?? "",
        ]);
      });
      return rows.map((cells) => cells.join(",")).join("\n");
    },
  },
  {
    type: "index",
    columnKey: "index",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    prop: "dict_name",
    label: "字典名称",
    sortable: "custom",
    minWidth: 130,
  },
  {
    prop: "dict_code",
    label: "字典代码",
    sortable: "custom",
    minWidth: 160,
  },
  {
    prop: "sort_number",
    label: "排序号",
    sortable: "custom",
    width: 120,
    align: "center",
  },
  {
    prop: "created_at",
    label: "创建时间",
    sortable: "custom",
    minWidth: 180,
    align: "center",
  },
  {
    columnKey: "action",
    label: "操作",
    width: 120,
    align: "center",
    slot: "action",
    fixed: "right",
    hideInPrint: true,
    hideInExport: true,
  },
]);

/** 表格数据源 */
const datasource = ({ pages, orders }) => {
  return pageDictionaries({ ...orders, ...pages });
};

/** 删除字典 */
const removeDict = (row) => {
  EleMessage.error("删除: " + row.dict_name);
};

/** 修改字典 */
const editDict = (row) => {
  EleMessage.info({ message: "删除: " + row.dict_name, plain: true });
};

/** 子表格多选选中数据 */
const childSelections = reactive({});

/** 获取子表格多选选中数据 */
const getChildSelections = () => {
  console.log(JSON.parse(JSON.stringify(childSelections)));
  const length = Object.keys(childSelections)
    .map((key) => childSelections[key].length)
    .reduce((a, b) => a + b, 0);
  EleMessage.success(`共选中 ${length} 条数据, 已打印在控制台`);
};

/** 存储已加载的子表格数据 */
const dictionaryDatas = reactive({});

const handleSetDictionaryData = (dict_id, data) => {
  dictionaryDatas[dict_id] = data;
};
</script>
